<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<!-- 图标组件库 -->
	<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
	<%--这个页面的样式统一在/css/main.css改--%>
	<link href="/css/main.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
	<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript">

		//页面加载完毕
		$(function(){

			//导航中所有文本颜色为黑色
			$(".liClass > a").css("color" , "black");

			//默认选中导航菜单中的第一个菜单项
			$(".liClass:first").addClass("active");

			//第一个菜单项的文字变成白色
			$(".liClass:first > a").css("color" , "white");

			//给所有的菜单项注册鼠标单击事件
			$(".liClass").click(function(){
				//移除所有菜单项的激活状态
				$(".liClass").removeClass("active");
				//导航中所有文本颜色为黑色
				$(".liClass > a").css("color" , "black");
				//当前项目被选中
				$(this).addClass("active");
				//当前项目颜色变成白色
				$(this).children("a").css("color","white");
			});


			window.open("workbench/main/index.do","workareaFrame");

			//给‘确定’按钮添加单击事件
			$("#logoutBtn").click(function () {
				//发送同步请求
				window.location.href = "settings/qx/user/logout.do";
			});
		});
	</script>

	<link rel="stylesheet" crossorigin href="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.24/index.css" />
	<script type="module" crossorigin src="https://g.alicdn.com/aliyun-documentation/web-chatbot-ui/0.0.24/index.js"></script>
	<script>
		window.CHATBOT_CONFIG = {
			endpoint: "https://webchat-bot-cf-wgblksuepc.cn-hangzhou.fcapp.run/chat", // 可以替换为 https://{your-fc-http-trigger-domain}/chat
			displayByDefault: false, // 默认不展示 AI 助手聊天框
			aiChatOptions: { // aiChatOptions 中 options 会传递 aiChat 组件，自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat
				conversationOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#conversation-options
					conversationStarters: [
						{prompt: '如何与客户深入沟通？'},
						{prompt: '怎么介绍我们的产品？'},
						{prompt: '客户不满意如何处理?'},
					]
				},
				displayOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#display-options
					height: 600,
				},
				personaOptions: { // 自定义取值参考：https://docs.nlkit.com/nlux/reference/ui/ai-chat#chat-personas
					assistant: {
						name: '你好，我是你的 AI 助手',
						// AI 助手的图标
						avatar: 'https://img.alicdn.com/imgextra/i2/O1CN01Pda9nq1YDV0mnZ31H_!!6000000003025-54-tps-120-120.apng',
						tagline: '您可以尝试点击下方的快捷入口开启体验！',
					}
				}
			},
			dataProcessor: {
				/**
				 * 在向后端大模型应用发起请求前改写 Prompt。
				 * 比如可以用于总结网页场景，在发送前将网页内容包含在内，同时避免在前端显示这些内容。
				 * @param {string} prompt - 用户输入的 Prompt
				 * @param {string}  - 改写后的 Prompt
				 */
				rewritePrompt(prompt) {
					return prompt;
				}
			}
		};
	</script>
	<style>
		:root {
			/* webchat 工具栏的颜色 */
			--webchat-toolbar-background-color: #1464E4;
			/* webchat 工具栏文字和按钮的颜色 */
			--webchat-toolbar-text-color: #FFF;
		}
		/* webchat 对话框如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
		.webchat-container {
			z-index: 100;
			bottom: 10px;
			right: 10px;
		}
		/* webchat 的唤起按钮如果被遮挡，可以尝试通过 z-index、bottom、right 等设置来调整位置 */
		.webchat-bubble-tip {
			z-index: 99;
			bottom: 20px;
			right: 20px;
		}
	</style>

</head>
<body>
	
	<!-- 我的资料 -->
	<div class="modal fade" id="myInformation" role="dialog">
		<div class="modal-dialog" role="document" style="width: 30%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">我的资料</h4>
				</div>
				<div class="modal-body">
					<div style="position: relative; left: 40px;">
						姓名：<b>${sessionUser.name}</b><br><br>
						登录帐号：<b>${sessionUser.loginAct}</b><br><br>
						组织机构：<b>${sessionUser.deptno}</b><br><br>
						邮箱：<b>${sessionUser.email}</b><br><br>
						失效时间：<b>${sessionUser.expireTime}</b><br><br>
						允许访问IP：<b>${sessionUser.allowIps}</b>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 修改密码的模态窗口 -->
	<div class="modal fade" id="editPwdModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 70%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">修改密码</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label for="oldPwd" class="col-sm-2 control-label">原密码</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="oldPwd" style="width: 200%;">
							</div>
						</div>
						
						<div class="form-group">
							<label for="newPwd" class="col-sm-2 control-label">新密码</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="newPwd" style="width: 200%;">
							</div>
						</div>
						
						<div class="form-group">
							<label for="confirmPwd" class="col-sm-2 control-label">确认密码</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="confirmPwd" style="width: 200%;">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='login.html';">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 退出系统的模态窗口 -->
	<div class="modal fade" id="exitModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 30%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">离开</h4>
				</div>
				<div class="modal-body">
					<p>您确定要退出系统吗？</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="logoutBtn">确定</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 顶部 -->
	<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
		<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;</div>
<%--		<span style="font-size: 12px;">&copy;2022 猿头猿脑的王狗蛋</span>--%>
		<div style="position: absolute; top: 15px; right: 50px;">
			<ul>
				<li class="dropdown user-dropdown">
					<a href="javascript:void(0)" style="text-decoration: none; color: white;" class="dropdown-toggle" data-toggle="dropdown">
						<span class="glyphicon glyphicon-user"></span> ${sessionScope.sessionUser.name} <span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="javascript:void(0)"><span class="glyphicon glyphicon-wrench"></span> 系统设置</a></li>
						<li><a href="javascript:void(0)" data-toggle="modal" data-target="#myInformation"><span class="glyphicon glyphicon-file"></span> 我的资料</a></li>
						<li><a href="javascript:void(0)" data-toggle="modal" data-target="#editPwdModal"><span class="glyphicon glyphicon-edit"></span> 修改密码</a></li>
						<li><a href="javascript:void(0);" data-toggle="modal" data-target="#exitModal"><span class="glyphicon glyphicon-off"></span> 退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>

	<!-- 中间 -->
	<div id="center" style="position: absolute;top: 50px; bottom: 30px; left: 0px; right: 0px;">
		<!-- 导航 -->
		<div class="" id="navigation" style="left: 0px; width: 18%; position: relative; height: 100%; overflow:auto;">
			<%--菜单主体--%>
			<ul id="no1" class="nav nav-pills nav-stacked">
				<%--首页主干--%>
				<li class="liClass"><a href="workbench/main/index.do" data-toggle="collapse" data-target="#no21" target="workareaFrame"><span class="glyphicon glyphicon-home"></span> 首页<i class="menu-arrow"></i></a>
				</li>
				<%--客户管理主干--%>
				<li class="liClass">
					<a href="javascript:void(0);"
						data-toggle="collapse"
						data-target="#no22">
						<span class="glyphicon glyphicon-play-circle"></span> 客户管理
					</a>
					<%--改--%>
					<ul id="no22" class="nav nav-pills nav-stacked collapse">
						<%--客户公海分支--%>
						<li class="liClass">
							<a href="workbench/customerhighseas/index.do" target="workareaFrame">&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="glyphicon glyphicon-user"></span> 客户公海
							</a>
						</li>
						<%--客户分支--%>
						<li class="liClass">
							<a href="workbench/customer/index.do" target="workareaFrame">&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="glyphicon glyphicon-user">
								</span> 客户
							</a>
						</li>
						<%--联系人分支--%>
						<li class="liClass">
							<a href="workbench/contacts/index.do" target="workareaFrame">&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="glyphicon glyphicon-earphone">
								</span> 联系人
							</a>
						</li>
					</ul>
				</li>
				<%--市场活动主干--%>
				<li class="liClass">
					<a href="workbench/activity/index.do" target="workareaFrame">
						<span class="glyphicon glyphicon-play-circle">
						</span> 市场活动
					</a>
				</li>
				<%--流程管理主干--%>
				<li class="liClass">
					<a href="javascript:void(0);"
					   data-toggle="collapse"
					   data-target="#no23"
					   class="collapsed"> <!-- 添加 collapsed 类 -->
						<span class="glyphicon glyphicon-stats"></span> 流程管理
					</a>
					<ul id="no23" class="nav nav-pills nav-stacked collapse">
						<%--线索分支--%>
						<li class="liClass">
							<a href="workbench/clue/index.do" target="workareaFrame">&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="glyphicon glyphicon-search">
								</span> 线索（潜在客户）
							</a>
						</li>
						<%--交易分支--%>
						<li class="liClass">
							<a href="workbench/transaction/index.do" target="workareaFrame">&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="glyphicon glyphicon-usd">
								</span> 交易（商机）
							</a>
						</li>
					</ul>
				</li>

				<li class="liClass"><a href="workbench/saleview/index.do" target="workareaFrame"><span class="glyphicon glyphicon-phone-alt"></span> 售后回访</a></li>
				<li class="liClass">
					<a href="#no2" class="collapsed" data-toggle="collapse"><span class="glyphicon glyphicon-stats"></span> 数据分析</a>
					<ul id="no2" class="nav nav-pills nav-stacked collapse">
						<li class="liClass"><a href="workbench/chart/transaction/market.do" target="workareaFrame">&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 市场活动统计图表</a></li>
						<li class="liClass"><a href="workbench/chart/transaction/clue.do" target="workareaFrame">&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 线索统计图表</a></li>
						<li class="liClass"><a href="workbench/chart/customerAndContacts/contact.do" target="workareaFrame">&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 客户和联系人统计图表</a></li>
						<li class="liClass"><a href="workbench/chart/transaction/index.do" target="workareaFrame">&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-right"></span> 交易统计图表</a></li>
					</ul>
				</li>
				<%--售后回访主干--%>
				<li class="liClass">
					<a href="javascript:void(0)" target="workareaFrame">
					<span class="glyphicon glyphicon-phone-alt">
					</span> 售后回访
					</a>
				</li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-file"></span> 报表</a></li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-shopping-cart"></span> 销售订单</a></li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-send"></span> 发货单</a></li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-earphone"></span> 跟进</a></li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-leaf"></span> 产品</a></li>
				<li class="liClass"><a href="javascript:void(0);" target="workareaFrame"><span class="glyphicon glyphicon-usd"></span> 报价</a></li>
			</ul>

			<!-- 分割线 -->
			<div id="divider1" style="position: absolute; top : 0px; right: 0px; width: 1px; height: 100% ; background-color: #B3B3B3;"></div>
		</div>
		
		<!-- 工作区 -->
		<div id="workarea" style="position: absolute; top : 0px; left: 18%; width: 82%; height: 100%;">
			<%--它会在这个div里加载另一个页面，即workbench/main/index.jsp--%>
			<iframe style="border-width: 0px; width: 100%; height: 100%;" name="workareaFrame"></iframe>
		</div>
		
	</div>
	
	<div id="divider2" style="height: 1px; width: 100%; position: absolute;bottom: 30px; background-color: #B3B3B3;"></div>
	
	<!-- 底部 -->
	<div id="down" style="height: 30px; width: 100%; position: absolute;bottom: 0px;"></div>
	
</body>
</html>